<template>
  <!-- 公文交换 -->
  <div class="w-bg">
    <!-- 顶部分类 -->
    <div class="top-category">
      <!-- 分发 接收 -->
      <div class="category-title">
        <div
          v-for="(item, i) in categoryArr"
          :key="i"
          :class="['title-item', state.categoryActive === i ? 'title-active' : '']"
          @click="onChangeCategory(i)"
          >{{ item }}</div
        >
      </div>
    </div>

    <!-- 分类内容区 -->
    <div class="type-content">
      <!-- 分发记录 -->
      <DistributeList v-if="state.categoryActive === 0" :categroy-val="state.categoryActive" />
      <!-- 接收记录 -->
      <AcceptList v-else :categroy-val="state.categoryActive" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import AcceptList from './components/acceptList/index.vue';
import DistributeList from './components/distributeList/index.vue';
const categoryArr = reactive(['分发记录', '接收记录']);
const state = reactive({
  categoryActive: 0,
  typeActive: 0,
  themecolor: sessionStorage.getItem('primaryColor')
});
function onChangeCategory(categoryVal) {
  if (state.categoryActive === categoryVal) {
    return;
  } else {
    state.categoryActive = categoryVal;
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
